import React, { FC } from 'react';
import { connect } from 'react-redux';
import { formatTime } from '@/utils/time-utils';
import { isEmptyExecptZero } from '@/utils/utils';
import { ApprovalColor, ReadStatus } from '../../../approval/constants';
import { ConnectProps } from 'typings/connect';
import styles from './index.module.less';
import { useHistory } from 'react-router-dom';

interface IApprovalPage extends ConnectProps {
  tabId: string;
  taskData: any;
  loading?: boolean;
}

// 审批业务首页
const List: FC<IApprovalPage> = (props) => {
  const history = useHistory();
  const renderSummary = (data: any) => {
    const result = data.contentList || [];

    return (
      <>
        {result.map(({ attrName, attrValue }: any) =>
          !isEmptyExecptZero(attrValue) ? (
            <div>{attrName + '：' + attrValue}</div>
          ) : null
        )}
      </>
    );
  };
  const clickTask = (el?: any) => {
    if (!el) return;
    console.log('onClick', el);
    const procNo = props.tabId === 'toapproval' ? el.procNo : '';
    const taskDefKey = props.tabId === 'toapproval' ? el.taskDefKey : '';
    const recordId =
      props.tabId !== 'myapply' ? el.taskRecordId : el.procRecordId;
    history.push(
      `/approval?recordId=${recordId}&tabId=${props.tabId}&procNo=${procNo}&taskDefKey=${taskDefKey}`
    );
  };

  return (
    <div>
      {props.taskData?.data.map((el: any) => (
        <div
          className={styles.siderItem}
          key={el.uid}
          onClick={() => {
            clickTask(el);
          }}
        >
          <div className={styles.siderInner}>
            <div className={styles.header}>
              {/* 0未读 1已读 */}
              <div
                className={
                  el.readStatus == ReadStatus.UnRead
                    ? styles.unread + ' unread-symbol'
                    : styles.read + ' unread-symbol'
                }
              >
              </div>
              <div className={styles.titleWrap}>
                {el.procName}
                <div
                  className={
                    styles.status + ' ' + ApprovalColor[String(el.procStatus)]
                  }
                >
                  {el.procStatusName}
                </div>
              </div>
              <span className={styles.time}>
                {props.taskData?.srvTime && el.crtTime
                  ? formatTime(props.taskData?.srvTime, el.crtTime)
                  : null}
              </span>
            </div>
            <div className={styles.siderItemContent}>{renderSummary(el)}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default connect()(
  List
);
